import {Checkbox, Form, Input, InputNumber, Modal, Select} from 'antd';
import React, {useEffect} from 'react';

type FormItemProps = {
  open: boolean;
  onClose: () => void;
  onOk: (values: Record<string, any>) => void;
  values: Record<string, any>;
};

const FormItem: React.FC<FormItemProps> = ({ open, onClose, values,onOk }) => {
  const [form] = Form.useForm();
  useEffect(() => {
    form.setFieldsValue(values);
  }, []);
  return (
    <Modal
      title={values?.id ? `修改：${values.name}` : '新增'}
      destroyOnClose
      onCancel={onClose}
      maskClosable={false}
      open={open}
      onOk={() => {
        form.validateFields().then(formValues=>{
          if(typeof formValues.options === 'string'){
            formValues.options = formValues.options.split(",");
          }
          onOk(formValues);
        });
      }}
      onClose={onClose}
    >
      <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} initialValues={{
        formType:'text',
      }}>
        <Form.Item name="key" label="key" style={{display:'none'}}>
          <Input />
        </Form.Item>
        <Form.Item name="label" label="参数名" rules={[{ required: true, message: '必填' }]}>
          <Input />
        </Form.Item>
        <Form.Item name="placeholder" label="提示词">
          <Input.TextArea autoSize={{ minRows: 8, maxRows: 8 }} />
        </Form.Item>
        <Form.Item name="formType" label="参数类型" rules={[{ required: true, message: '必填' }]}>
          <Select>
            <Select.Option value="text">文本</Select.Option>
            <Select.Option value="number">数字</Select.Option>
            <Select.Option value="select">多选</Select.Option>
            <Select.Option value="radio">单选</Select.Option>
          </Select>
        </Form.Item>

        <Form.Item
          noStyle
          shouldUpdate={(prevValues, currentValues) =>
            prevValues.formType !== currentValues.formType
          }
        >
          {({ getFieldValue }) =>
            getFieldValue('formType') === 'text' ? (
              <>
                <Form.Item
                  name="minLines"
                  label="最小行"
                  initialValue={4}
                >
                  <InputNumber min={0} step={1} precision={0} />
                </Form.Item>
                <Form.Item
                  name="maxLines"
                  label="最大行"
                  initialValue={4}
                >
                  <InputNumber min={0} step={1} precision={0} />
                </Form.Item>
              </>
            ) : getFieldValue('formType') === 'number' ? (
              <>
                <Form.Item name="min" label="最小值" initialValue={0}>
                  <InputNumber min={0} step={1} precision={0} />
                </Form.Item>
                <Form.Item name="max" label="最大值" initialValue={2000}>
                  <InputNumber min={0} step={1} precision={0} />
                </Form.Item>
              </>
            ) : getFieldValue('formType') === 'select' || getFieldValue('formType') === 'radio' ? (
              <Form.Item
                name="options"
                label="可选值"
                rules={[{ required: true, message: '必填' }]}
              >
                <Input.TextArea autoSize={{ minRows: 8, maxRows: 8 }} />
              </Form.Item>
            ) : null
          }
        </Form.Item>
        <Form.Item
          name="isRequired"
          label="是否必填"
          valuePropName="checked"
        >
          <Checkbox />
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default FormItem;
